<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <!--<div class="layui-inline">
                            <label class="layui-form-label">跟进状态</label>
                            <div class="layui-input-block">
                                <select name="status" lay-filter="aihao" id="selectStatus">
                                    <option value=>全部</option>
                                </select>
                            </div>
                        </div>-->
                        <div class="layui-inline">
                            <label class="layui-form-label">开始日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="accessTimeStart" id="accessTimeStart" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="accessTimeEnd" id="accessTimeEnd" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="innerTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">手动分配</a>
        </script>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="batchEdit">批量手动分配</a>
        </script>

        <div id="openProductBox" style="display: none; padding: 10px;">

            <table class="layui-hide" id="openProductTable" lay-filter="openProductTable"></table>
            <script type="text/html" id="distribution">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">确定分配</button>
                </div>
            </script>
            <script>
                layui.use(['form', 'table','laydate'], function () {
                    var $ = layui.jquery,
                        form = layui.form,
                        laydate = layui.laydate,
                        table = layui.table;


                    //日期
                    laydate.render({
                        elem: '#accessTimeStart',
                        type: 'datetime'
                    });
                    laydate.render({
                        elem: '#accessTimeEnd',
                        type: 'datetime'
                    });

                    table.render({
                        elem: '#currentTableId',
                        method: 'post',
                        url: '/zxjy/highseas/list/' + layui.data("user").roleType.toLowerCase(),
                        toolbar: '#currentTableBar',
                        contentType: 'application/json',
                        defaultToolbar: ['filter', 'exports', 'print', {
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }],
                        cellMinWidth: 100,
                        cols: [[
                            {type: 'checkbox'},
                            {field: 'followUpTimes', title: '跟进次数'},
                            {field: 'merchantName', title: '数据商'},
                            {field: 'phone', title: '手机号'},
                            {field: 'statusName', title: '跟进状态'},
                            {field: 'accessTime',  title: '接入时间'}
                            // {title: '操作', toolbar: '#innerTableBar'}
                        ]],
                        response: {statusCode: 200},
                        parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                            return {
                                "code": res.state, //解析接口状态
                                "msg": res.success, //解析提示文本
                                "count": res.result.total, //解析数据长度
                                "data": res.result.list //解析数据列表
                            };
                        },
                        request: {
                            pageName: 'pageNum' // 页码的参数名称，默认：page
                            , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                        },
                        limits: [10, 15, 20, 25, 50, 100],
                        limit: 10,
                        page: true,
                        skin: 'line'
                    });


                    var index;
                    var indexData;
                    //确认分配
                    table.on('toolbar(openProductTable)', function(obj){
                        let highSeas = table.checkStatus('currentTableId').data;
                        if (highSeas.length === 0) {
                            layer.alert("请选择一条公海数据");
                            return;
                        }
                        const employee = table.checkStatus(obj.config.id).data; //获取选中行
                        switch(obj.event){
                            case 'getCheckData':
                                if (employee.length === 0 ){
                                    layer.alert("请选择一个员工");
                                    return;
                                }

                                var para = {}
                                para.employeeId = employee[0]["id"];
                                para.highSeasIds = highSeas.map(data => data.id);
                                $.ajax({
                                    type: "POST",
                                    contentType: "application/json; charset=utf-8",
                                    url: "/zxjy/highseas/distribution/supervisor",
                                    data: JSON.stringify(para),
                                    headers: {
                                        'Authorization': layui.data("Authorization")['Authorization'],
                                    },
                                    success: function (result) {
                                        if (result.state === 200) {
                                            layer.close(index);
                                            layer.alert("分配成功");
                                            table.reload('currentTableId');
                                        }
                                    }
                                });
                                break;
                        }
                    });

/*                    $.ajax({
                        type: "get",
                        url: "/zxjy/enum/highseasstatus",
                        // url: '../api/status.json',
                        headers: {
                            'Authorization': layui.data("Authorization")['Authorization'],
                        },
                        success: function (result) {
                            if (result.state === 200) {
                                for (obj of result.result) {
                                    $("#selectStatus").append("<option value=\""+obj.key+"\">"+obj.value+"</option>");
                                }
                                //重新渲染
                                layui.form.render("select");
                            }
                        }
                    });*/

                    // 监听搜索操作
                    form.on('submit(data-search-btn)', function (data) {
                        //执行搜索重载
                        table.reload('currentTableId', {
                            url: '/zxjy/highseas/list/' + layui.data("user").roleType.toLowerCase(),
                            where: {
                                phone: data.field.phone,
                                status: '' === data.field.status? null:data.field.status,
                                accessTimeEnd: data.field.accessTimeEnd,
                                accessTimeStart: data.field.accessTimeStart
                            }
                        });
                        return false;
                    });

                    table.on('tool(currentTableFilter)', function (obj) {
                        indexData = obj.data;
                        if (obj.event === 'edit') {
                            var layer = layui.layer;
                            index=layer.open({
                                type: 1,
                                content: $('#openProductBox'),
                                area: ['700px', '620px'], //宽高
                                success: function () {
                                    table.render({
                                        elem: '#openProductTable',
                                        // url: '../api/user.json',
                                        method: 'post',
                                        url: '/zxjy/user/list/supervisor',
                                        toolbar: '#distribution',
                                        contentType: 'application/json',
                                        cols: [[
                                            {type: "radio"},
                                            {field: 'ifAvailableName', title: '启用状态'},
                                            {field: 'nickname', title: '昵称'},
                                            {field: 'roleTypeName', title: '角色类型'},
                                            {field: 'statusName', title: '员工状态'},
                                            {field: 'username', title: '帐号'},
                                        ]],
                                        response: {statusCode: 200},
                                        parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                                            return {
                                                "code": res.state, //解析接口状态
                                                "msg": res.success, //解析提示文本
                                                "count": res.result.total, //解析数据长度
                                                "data": res.result.list //解析数据列表
                                            };
                                        },
                                        request: {
                                            pageName: 'pageNum' // 页码的参数名称，默认：page
                                            , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                                        },
                                        limits: [10, 15, 20, 25, 50, 100],
                                        limit: 10,
                                        page: true,
                                        skin: 'line'
                                    });
                                    // layer.close(index)
                                }
                            })

                        }

                    });

                    table.on('toolbar(currentTableFilter)', function (obj) {
                        indexData = obj.data;
                        if (obj.event === 'batchEdit') {
                            var layer = layui.layer;
                            index=layer.open({
                                type: 1,
                                content: $('#openProductBox'),
                                area: ['700px', '620px'], //宽高
                                success: function () {
                                    table.render({
                                        elem: '#openProductTable',
                                        // url: '../api/user.json',
                                        method: 'post',
                                        url: '/zxjy/user/list/supervisor',
                                        toolbar: '#distribution',
                                        contentType: 'application/json',
                                        cols: [[
                                            {type: "radio"},
                                            {field: 'ifAvailableName', title: '启用状态'},
                                            {field: 'nickname', title: '昵称'},
                                            {field: 'roleTypeName', title: '角色类型'},
                                            {field: 'statusName', title: '员工状态'},
                                            {field: 'username', title: '帐号'},
                                        ]],
                                        response: {statusCode: 200},
                                        parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                                            return {
                                                "code": res.state, //解析接口状态
                                                "msg": res.success, //解析提示文本
                                                "count": res.result.total, //解析数据长度
                                                "data": res.result.list //解析数据列表
                                            };
                                        },
                                        request: {
                                            pageName: 'pageNum' // 页码的参数名称，默认：page
                                            , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                                        },
                                        limits: [10, 15, 20, 25, 50, 100],
                                        limit: 10,
                                        page: true,
                                        skin: 'line'
                                    });
                                    // layer.close(index)
                                }
                            })

                        }

                    });

                });
            </script>
        </div>
    </div>
</div>


</body>
</html>
